@charset "utf-8";

@import 'normalize.scss';

@import '../lib/swiper/swiper.min.scss';

@import 'base.scss';

/* 设置高度 100% */
html,body{
	width: 100%;
	height: 100%;
}

/* 为了 一会 使用的时候 有提示 写在 index页面中 */
//  计算尺寸函数
@function p2r($size){
	@return ($size/32)*1rem;
}

/* 设置图片居中 background center */
@mixin bgc ($url, $width) {
	background: url($url) no-repeat center /100% 100%;
	position: absolute;
	left: 50%;
	margin-left: p2r(-$width/2);
}

/* 直接设置背景图 不考虑居中 */
@mixin bg ($url) {
	background: url($url) no-repeat center /100% 100%;
	position: absolute;
} // 调用方式 bg(xxx)

/* 设置尺寸 */
@mixin size ($width, $height) {
	width: p2r($width);
	height: p2r($height);
}

/* 音乐播放 */
.music-box{
	width: p2r(50);
	height: p2r(50);
	position: fixed;
	right: p2r(20);
	top: p2r(20);
	z-index: 10000;
	border-radius: p2r(25);
	background-image: url('../images/play.svg');
	background-size: contain;
	background-repeat: no-repeat;
}
.music-box.rotate{
	animation: rotating 1.2s linear infinite;
}

@keyframes rotating{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(1turn);
	}
}

/*loading页面*/
.loading{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #ffece9;
	overflow: hidden;
	.rider{
		width: (154/32)*1rem;
		height: (121/32)*1rem;
		background: url('../images/rider1.png') no-repeat center / 100% 100%;
		position: absolute;
		top:(233/32)*1rem;
		right: (108/32)*1rem;
	}
	.progress{
		width: (416/32)*1rem;
		height: (20/32)*1rem;
		background-color: #fc2e4d;
		border: 2px solid #373838;
		border-radius: (20/32)*1rem;
		position: absolute;
		top: (360/32)*1rem;
		left: 50%;
		transform: translateX(-50%);
		/*margin-left: (-416/32/2)*1rem;*/
	}
	.info{
		width: (220/32)*1rem;
		height: (28/32)*1rem;
		background: url('../images/loading_text.png') no-repeat center / 100% 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		/*margin-left: (-220/32/2)*1rem;*/
		top: (420/32)*1rem;
	}
	.logo{
		width: (162/32)*1rem;
		height: (39/32)*1rem;
		background: url('../images/waimai_logo.png') no-repeat center / 100% 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		/*margin-left: (-162/32/2)*1rem;*/
		bottom: (118/32)*1rem;
	}
	.copyright{
		font-size: (24/32)*1rem;
		color: #e0979d;
		position: absolute;
		/*left: 50%;
		transform: translateX(-50%);*/
		bottom: (73/32)*1rem;
		width: 100%;
		text-align: center;
	}
}

/*welcome页面*/
.welcome{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: deepskyblue;
	overflow: hidden;
	.info{
		width: (397/32)*1rem;
		height: (224/32)*1rem;
		background: url('../images/theme_title.png') no-repeat center / 100% 100%;
		position: absolute;
		top: (42/32)*1rem;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-397/32/2)*1rem;
		.hello{
			width: (70/32)*1rem;
			height: (75/32)*1rem;
			background: url('../images/hello.png') no-repeat center / 100% 100%;
			position: absolute;
			top: (20/32)*1rem;
			right: (8/32)*1rem;
		}
	}
	.bear-box{
		width: (167/32)*1rem;
		height: (279/32)*1rem;
		position: absolute;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-167/32/2)*1rem;
		bottom: (346/32)*1rem;
		.bear{
			width: 100%;
			height: 100%;
			background: url('../images/rider2.png') no-repeat center / 100% 100%;
		}
		.smoke{
			width: (167/32)*1rem;
			height: (32/32)*1rem;
			background: url('../images/jet1.png') no-repeat center / 100% 100%;
			position: absolute;
			bottom: 0;
		}
	}
	.cloud{
		width: (640/32)*1rem;
		height: (673/32)*1rem;
		background: url('../images/clouds.png') no-repeat center / 100% 100%;
		position: absolute;
		bottom: 0;
	}
	.grass1{
		width: (640/32)*1rem;
		height: (396/32)*1rem;
		background: url('../images/grass1.png') no-repeat center / 100% 100%;
		position: absolute;
		bottom: 0;
	}
	.trees{
		width: (599/32)*1rem;
		height: (71/32)*1rem;
		background: url('../images/trees.png') no-repeat center / 100% 100%;
		position: absolute;
		bottom: (352/32)*1rem;
	}
	.grass2{
		width: (640/32)*1rem;
		height: (228/32)*1rem;
		background: url('../images/grass2.png') no-repeat center / 100% 100%;
		position: absolute;
		bottom: 0;
	}
	.rotate-btn-box{
		width: (208/32)*1rem;
		height: (208/32)*1rem;
		position: absolute;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-208/32/2)*1rem;
		bottom: (86/32)*1rem;
		.btn{
			width: (124/32)*1rem;
			height: (124/32)*1rem;
			position: absolute;
			left: 50%;
			top: 55%;
			transform: translate(-50%,-50%);
			/*margin-left: (-124/32/2)*1rem;*/
			/*margin-top: (-124/32/2)*1rem;*/
			background: url('../images/bear-btn-aft.png') no-repeat center / 100% 100%;
		}
		.circle1{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: url('../images/circle1.png') no-repeat center / 100% 100%;
		}
		.circle2{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: url('../images/circle2.png') no-repeat center / 100% 100%;
		}
	}
}

.waimai-container{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	overflow: hidden;
	/*background-color: hotpink;*/
}
.page1{
	background-color: #BE8651;
	.title{
		position: absolute;
		left: (32/32)*1rem;
		top: (32/32)*1rem;
		padding-left: (20/32)*1rem;
		h3{
			font-size: (64/32)*1rem;
			color: #fff;
		}
		p{
			font-size: (24/32)*1rem;
			color: #fff;
			margin-top: (12/32)*1rem;
		}
		.line{
			width: (5/32)*1rem;
			height: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.scroll-page1{
		.bg{
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-576/32/2)*1rem;
			bottom: (252/32)*1rem;
			background: url('../images/bg1.png') no-repeat center / 100% 100%;
			width: (576/32)*1rem;
			height: (573/32)*1rem;
		}
		.person{
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-439/32/2)*1rem;
			bottom: (290/32)*1rem;
			z-index: 1;
			background: url('../images/front1.png') no-repeat center / 100% 100%;
			width: (439/32)*1rem;
			height: (349/32)*1rem;
			.files{
				background-image: url('../images/papers.png');
				background-position: bottom right;
				background-size: (115/32)*1rem (114/32)*1rem;
				background-repeat: no-repeat;
				width: (85/32)*1rem;
				height: (50/32)*1rem;
				position: absolute;
				left: (27/32)*1rem;
				bottom: (104/32)*1rem;
				.paper1{
					background-image: url('../images/papers.png');
					background-position: 0 (-32/32)*1rem;
					background-size: (115/32)*1rem (114/32)*1rem;
					background-repeat: no-repeat;
					width: (86/32)*1rem;
					height: (26/32)*1rem;
					position: absolute;
					left: (-70/32)*1rem;
					bottom: (45/32)*1rem;
				}
				.paper2{
					background-image: url('../images/papers.png');
					background-position: (-45/32)*1rem 0;
					background-size: (115/32)*1rem (114/32)*1rem;
					background-repeat: no-repeat;
					width: (64/32)*1rem;
					height: (20/32)*1rem;
					position: absolute;
					right: 0;
					bottom: (80/32)*1rem;
				}
			}
		}
		.message-container{
			background: url('../images/text_bub1.png') no-repeat center / 100% 100%;
			width: (363/32)*1rem;
			height: (119/32)*1rem;
			position: absolute;
			bottom: (140/32)*1rem;
			right: (140/32)*1rem;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			/*.info{
				background: url('../images/text_work.png') no-repeat center / 100% 100%;
				width: (220/32)*1rem;
				height: (30/32)*1rem;
			}*/
		}
	}
	.scroll-page2{
		.bg{
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-582/32/2)*1rem;
			bottom: (252/32)*1rem;
			background: url('../images/bg2.png') no-repeat center / 100% 100%;
			width: (582/32)*1rem;
			height: (520/32)*1rem;
		}
		.person{
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-436/32/2)*1rem;
			bottom: (270/32)*1rem;
			z-index: 1;
			background: url('../images/relax.png') no-repeat center / 100% 100%;
			width: (436/32)*1rem;
			height: (332/32)*1rem;
			.leg1{
				position: absolute;
				left: (195/32)*1rem;
				bottom: (110/32)*1rem;
				z-index: 1;
				background: url('../images/leg1.png') no-repeat center / 100% 100%;
				width: (113/32)*1rem;
				height: (24/32)*1rem;
			}
			.leg2{
				position: absolute;
				left: (189/32)*1rem;
				bottom: (120/32)*1rem;
				z-index: 1;
				background: url('../images/leg2.png') no-repeat center / 100% 100%;
				width: (85/32)*1rem;
				height: (71/32)*1rem;
			}
		}
		.message-container{
			background: url('../images/text_bub1.png') no-repeat center / 100% 100%;
			width: (363/32)*1rem;
			height: (119/32)*1rem;
			position: absolute;
			bottom: (140/32)*1rem;
			right: (140/32)*1rem;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			.info{
				background: url('../images/text_life.png') no-repeat center / 100% 100%;
				width: (363/32)*1rem;
				height: (119/32)*1rem;
			}
		}
	}
	.scroll-page3{
		.bg{
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-561/32/2)*1rem;
			bottom: (270/32)*1rem;
			background: url('../images/bg3.png') no-repeat center / 100% 100%;
			width: (561/32)*1rem;
			height: (516/32)*1rem;
		}
		.person{
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-503/32/2)*1rem;
			bottom: (300/32)*1rem;
			z-index: 1;
			background: url('../images/person.png') no-repeat center / 100% 100%;
			width: (503/32)*1rem;
			height: (229/32)*1rem;
			.word1{
				position: absolute;
				left: (7/32)*1rem;
				bottom: (194/32)*1rem;
				z-index: 1;
				background: url('../images/word1.png') no-repeat center / 100% 100%;
				width: (92/32)*1rem;
				height: (83/32)*1rem;
			}
			.word2{
				position: absolute;
				left: (115/32)*1rem;
				bottom: (245/32)*1rem;
				z-index: 1;
				background: url('../images/word2.png') no-repeat center / 100% 100%;
				width: (77/32)*1rem;
				height: (70/32)*1rem;
			}
			.word3{
				position: absolute;
				right: (130/32)*1rem;
				bottom: (220/32)*1rem;
				z-index: 1;
				background: url('../images/word3.png') no-repeat center / 100% 100%;
				width: (115/32)*1rem;
				height: (104/32)*1rem;
			}
			.word4{
				position: absolute;
				right: (12/32)*1rem;
				bottom: (230/32)*1rem;
				z-index: 1;
				background: url('../images/word4.png') no-repeat center / 100% 100%;
				width: (79/32)*1rem;
				height: (73/32)*1rem;
			}
		}
		.message-container{
			background: url('../images/text_bub1.png') no-repeat center / 100% 100%;
			width: (363/32)*1rem;
			height: (119/32)*1rem;
			position: absolute;
			bottom: (140/32)*1rem;
			right: (140/32)*1rem;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			.info{
				background: url('../images/text_res.png') no-repeat center / 100% 100%;
				width: (363/32)*1rem;
				height: (119/32)*1rem;
			}
		}
	}
	.sphere{
		background: url('../images/sphere1.png') no-repeat center / 100% 100%;
		width: (640/32)*1rem;
		height: (356/32)*1rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.bear{
		background: url('../images/bear1.png') no-repeat center / 100% 100%;
		width: (178/32)*1rem;
		height: (134/32)*1rem;
		position: absolute;
		right: (38/32)*1rem;
		bottom: 0;
	}
}
.page2{
	background-color: #EE4143;
	.title{
		position: absolute;
		left: (32/32)*1rem;
		top: (32/32)*1rem;
		padding-left: (20/32)*1rem;
		h3{
			font-size: (64/32)*1rem;
			color: #fff;
		}
		p{
			font-size: (24/32)*1rem;
			color: #fff;
			margin-top: (12/32)*1rem;
		}
		.line{
			width: (5/32)*1rem;
			height: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.bg{
		position: absolute;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-592/32/2)*1rem;
		bottom: (330/32)*1rem;
		background: url('../images/bg4.png') no-repeat center / 100% 100%;
		width: (592/32)*1rem;
		height: (490/32)*1rem;
	}
	.bear{
		background-image: url('../images/bear2.png');
		/*background-position: (-103/32)*1rem (-96/32)*1rem;
		background-size: (368/32)*1rem (427/32)*1rem;*/
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-227/32/2)*1rem;
		bottom: (310/32)*1rem;
		width: (227/32)*1rem;
		height: (336/32)*1rem;
		z-index: 1;
		.face1{
			position: absolute;
			left: (-102/32)*1rem;
			top: 0;
			background: url('../images/face1.png') no-repeat center / 100% 100%;
			width: (102/32)*1rem;
			height: (102/32)*1rem;
		}
		.face2{
			position: absolute;
			right: (-102/32)*1rem;
			top: (-102/32)*1rem;
			background: url('../images/face2.png') no-repeat center / 100% 100%;
			width: (102/32)*1rem;
			height: (102/32)*1rem;
		}
		.hand-left{
			position: absolute;
			left: (30/32)*1rem;
			top: (180/32)*1rem;
			background: url('../images/hand-left.png') no-repeat center / 100% 100%;
			width: (74/32)*1rem;
			height: (77/32)*1rem;
		}
		.hand-right{
			position: absolute;
			right: (30/32)*1rem;
			top: (180/32)*1rem;
			background: url('../images/hand-right.png') no-repeat center / 100% 100%;
			width: (74/32)*1rem;
			height: (77/32)*1rem;
		}
	}
	.sphere{
		background: url('../images/sphere2.png') no-repeat center / 100% 100%;
		width: (640/32)*1rem;
		height: (356/32)*1rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.table{
		background: url('../images/table.png') no-repeat center / 100% 100%;
		width: (514/32)*1rem;
		height: (258/32)*1rem;
		position: absolute;
		left: 50%;
		margin-left: (-514/32/2)*1rem;
		bottom: (140/32)*1rem;
		z-index: 1;
	}
	.food{
		background: url('../images/foods.png') no-repeat center / 100% 100%;
		width: (354/32)*1rem;
		height: (152/32)*1rem;
		position: absolute;
		left: 50%;
		margin-left: (-354/32/2)*1rem;
		bottom: (330/32)*1rem;
		z-index: 1;
	}
}
.page3{
	background-color: #DD8A03;
	.title{
		position: absolute;
		left: (32/32)*1rem;
		top: (32/32)*1rem;
		padding-left: (20/32)*1rem;
		h3{
			font-size: (64/32)*1rem;
			color: #fff;
		}
		p{
			font-size: (24/32)*1rem;
			color: #fff;
			margin-top: (12/32)*1rem;
		}
		.line{
			width: (5/32)*1rem;
			height: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.bg{
		position: absolute;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-592/32/2)*1rem;
		bottom: (300/32)*1rem;
		background: url('../images/bg5.png') no-repeat center / 100% 100%;
		width: (592/32)*1rem;
		height: (580/32)*1rem;
	}
	.bear{
		background-image: url('../images/bear3.png');
		/*background-size: (206/32)*1rem (321/32)*1rem;*/
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-206/32/2)*1rem;
		bottom: (195/32)*1rem;
		width: (206/32)*1rem;
		height: (321/32)*1rem;
		z-index: 1;
	}
	.sphere{
		background: url('../images/sphere3.png') no-repeat center / 100% 100%;
		width: (640/32)*1rem;
		height: (356/32)*1rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.license{
		background-image: url('../images/license.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: (40/32)*1rem;
		bottom: (500/32)*1rem;
		width: (197/32)*1rem;
		height: (140/32)*1rem;
	}
	.oil{
		background-image: url('../images/oil.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		/*transform: translateX(-50%);*/
		margin-left: (-205/32/2)*1rem;
		bottom: (660/32)*1rem;
		width: (205/32)*1rem;
		height: (107/32)*1rem;
	}
	.evil{
		background-image: url('../images/evil.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		right: (30/32)*1rem;
		bottom: (480/32)*1rem;
		width: (198/32)*1rem;
		height: (163/32)*1rem;
	}
}
.page4{
	background-color: #3FA100;
	.title{
		position: absolute;
		left: (32/32)*1rem;
		top: (32/32)*1rem;
		padding-left: (20/32)*1rem;
		h3{
			font-size: (64/32)*1rem;
			color: #fff;
		}
		p{
			font-size: (24/32)*1rem;
			color: #fff;
			margin-top: (12/32)*1rem;
		}
		.line{
			width: (5/32)*1rem;
			height: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.bg{
		position: absolute;
		left: 50%;
		margin-left: (-588/32/2)*1rem;
		bottom: (300/32)*1rem;
		background: url('../images/bg6.png') no-repeat center / 100% 100%;
		width: (588/32)*1rem;
		height: (333/32)*1rem;
	}
	.bear{
		background-image: url('../images/bear4.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		margin-left: (-309/32/2)*1rem;
		bottom: (170/32)*1rem;
		width: (309/32)*1rem;
		height: (325/32)*1rem;
		z-index: 1;
	}
	.sphere{
		background: url('../images/sphere4.png') no-repeat center / 100% 100%;
		width: (640/32)*1rem;
		height: (356/32)*1rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.card1{
		background-image: url('../images/card1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: (32/32)*1rem;
		bottom: (435/32)*1rem;
		width: (160/32)*1rem;
		height: (175/32)*1rem;
	}
	.card2{
		background-image: url('../images/card2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		margin-left: (-161/32/2)*1rem;
		bottom: (530/32)*1rem;
		width: (161/32)*1rem;
		height: (209/32)*1rem;
	}
	.card3{
		background-image: url('../images/card3.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		right: (46/32)*1rem;
		bottom: (420/32)*1rem;
		width: (167/32)*1rem;
		height: (184/32)*1rem;
	}
}
.page5{
	background-color: #0098CF;
	.title{
		position: absolute;
		left: (32/32)*1rem;
		top: (32/32)*1rem;
		padding-left: (20/32)*1rem;
		h3{
			font-size: (64/32)*1rem;
			color: #fff;
		}
		p{
			font-size: (24/32)*1rem;
			color: #fff;
			margin-top: (12/32)*1rem;
		}
		.line{
			width: (5/32)*1rem;
			height: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.bg{
		position: absolute;
		left: 50%;
		margin-left: (-594/32/2)*1rem;
		bottom: (300/32)*1rem;
		background: url('../images/bg7.png') no-repeat center / 100% 100%;
		width: (594/32)*1rem;
		height: (493/32)*1rem;
	}
	.bear{
		background-image: url('../images/rider2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		margin-left: (-167/32/2)*1rem;
		bottom: (175/32)*1rem;
		width: (167/32)*1rem;
		height: (279/32)*1rem;
		z-index: 1;
		.smoke{
			width: (167/32)*1rem;
			height: (32/32)*1rem;
			background: url('../images/jet1.png') no-repeat center / 100% 100%;
			position: absolute;
			bottom: 0;
		}
	}
	.sphere{
		background: url('../images/sphere5.png') no-repeat center / 100% 100%;
		width: (640/32)*1rem;
		height: (356/32)*1rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.cloud{
		background-image: url('../images/wcloud.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		margin-left: (-432/32/2)*1rem;
		bottom: (534/32)*1rem;
		width: (432/32)*1rem;
		height: (160/32)*1rem;
	}
}
.page6{
	background-color: #b02e95;
	.title{
		position: absolute;
		left: (32/32)*1rem;
		top: (32/32)*1rem;
		padding-left: (20/32)*1rem;
		h3{
			font-size: (64/32)*1rem;
			color: #fff;
		}
		p{
			font-size: (24/32)*1rem;
			color: #fff;
			margin-top: (12/32)*1rem;
		}
		.line{
			width: (5/32)*1rem;
			height: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.bg{
		position: absolute;
		left: 50%;
		margin-left: (-588/32/2)*1rem;
		bottom: (300/32)*1rem;
		background: url('../images/bg8.png') no-repeat center / 100% 100%;
		width: (588/32)*1rem;
		height: (333/32)*1rem;
	}
	.bear{
		background-image: url('../images/bear5.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		margin-left: (-285/32/2)*1rem;
		bottom: (200/32)*1rem;
		width: (285/32)*1rem;
		height: (328/32)*1rem;
		z-index: 1;
		.gift-box{
			position: absolute;
			top: 0;
			left: 50%;
			.gift1{
				@include bgc('../images/gift1.png', 35);
				width: (35/32)*1rem;
				height: (29/32)*1rem;
			}
			.gift2{
				@include bgc('../images/gift2.png', 93);
				width: (93/32)*1rem;
				height: (79/32)*1rem;
			}
			.gift3{
				@include bgc('../images/gift3.png', 72);
				width: (72/32)*1rem;
				height: (64/32)*1rem;
			}
			.gift4{
				@include bgc('../images/gift4.png', 91);
				width: (91/32)*1rem;
				height: (73/32)*1rem;
			}
			.gift5{
				@include bgc('../images/gift5.png', 99);
				width: (99/32)*1rem;
				height: (65/32)*1rem;
			}
			.gift6{
				@include bgc('../images/gift6.png', 107);
				width: (107/32)*1rem;
				height: (80/32)*1rem;
			}
			.gift7{
				@include bgc('../images/gift7.png', 107);
				width: (107/32)*1rem;
				height: (80/32)*1rem;
			}
			.gift8{
				@include bgc('../images/gift8.png', 88);
				width: (88/32)*1rem;
				height: (64/32)*1rem;
			}
			.gift9{
				@include bgc('../images/gift9.png', 78);
				width: (78/32)*1rem;
				height: (50/32)*1rem;
			}
			.gift10{
				@include bgc('../images/gift10.png', 49);
				width: (49/32)*1rem;
				height: (36/32)*1rem;
			}
			.gift11{
				@include bgc('../images/gift11.png', 51);
				width: (51/32)*1rem;
				height: (33/32)*1rem;
			}
			.gift12{
				@include bgc('../images/gift12.png', 37);
				width: (37/32)*1rem;
				height: (27/32)*1rem;
			}
			>div:nth-child(1){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (35/32)*1rem;
				height: (29/32)*1rem;
				transform: rotateZ(28deg) translateY(p2r(240));
			}
			>div:nth-child(2){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (93/32)*1rem;
				height: (79/32)*1rem;
				transform: rotateZ(28deg*2) translateY(p2r(240));
			}
			>div:nth-child(3){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (72/32)*1rem;
				height: (64/32)*1rem;
				transform: rotateZ(28deg*3) translateY(p2r(240));
			}
			>div:nth-child(4){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (91/32)*1rem;
				height: (73/32)*1rem;
				transform: rotateZ(28deg*4) translateY(p2r(240));
			}
			>div:nth-child(5){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (99/32)*1rem;
				height: (65/32)*1rem;
				transform: rotateZ(28deg*5) translateY(p2r(240));
			}
			>div:nth-child(6){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (107/32)*1rem;
				height: (80/32)*1rem;
				transform: rotateZ(28deg*6) translateY(p2r(240));
			}
			>div:nth-child(7){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (107/32)*1rem;
				height: (80/32)*1rem;
				transform: rotateZ(28deg*7) translateY(p2r(240));
			}
			>div:nth-child(8){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (88/32)*1rem;
				height: (64/32)*1rem;
				transform: rotateZ(28deg*8) translateY(p2r(240));
			}
			>div:nth-child(9){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (78/32)*1rem;
				height: (50/32)*1rem;
				transform: rotateZ(28deg*9) translateY(p2r(240));
			}
			>div:nth-child(10){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (49/32)*1rem;
				height: (36/32)*1rem;
				transform: rotateZ(28deg*10) translateY(p2r(240));
			}
			>div:nth-child(11){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (51/32)*1rem;
				height: (33/32)*1rem;
				transform: rotateZ(28deg*11) translateY(p2r(240));
			}
			>div:nth-child(12){
				position: absolute;
				top: 0;
				bottom: 0;
				width: (37/32)*1rem;
				height: (27/32)*1rem;
				transform: rotateZ(28deg*12 - 5deg) translateY(p2r(240));
			}
		}
	}
	.sphere{
		background: url('../images/sphere6.png') no-repeat center / 100% 100%;
		width: (640/32)*1rem;
		height: (356/32)*1rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
}
.page7{
	background-color: #19072A;
	.title{
		position: absolute;
		left: (32/32)*1rem;
		top: (32/32)*1rem;
		padding-left: (20/32)*1rem;
		h3{
			font-size: (64/32)*1rem;
			color: #fff;
		}
		p{
			font-size: (24/32)*1rem;
			color: #fff;
			margin-top: (12/32)*1rem;
		}
		.line{
			width: (5/32)*1rem;
			height: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.sphere{
		background: url('../images/sphere7.png') no-repeat center / 100% 100%;
		width: (640/32)*1rem;
		height: (356/32)*1rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
	.streetlight{
		@include bgc('../images/streetlight.png', 80);
		@include size (80,443);
		bottom: p2r(300);
		.light{
			@include bgc('../images/lamplight.png', 437);
			@include size (437,427);
			top: p2r(30);
		}
	}
	.bear{
		@include bgc('../images/bear6.png', 276);
		@include size (276,271);
		bottom: p2r(280);
	}
	.motobike{
		@include bg('../images/motobike.png');
		@include size (200,137);
		left: p2r(125);
		bottom: p2r(335);
	}
	.share{
		@include bgc('../images/share.png', 379);
		@include size (379, 113);
		bottom: p2r(140);
		.bds_weixin{
			display: block;
			width: 100%;
			height: 100%;
			opacity: 0;
			font-size: 0;
		}
	}
	.info{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: p2r(70);
		font-size: p2r(24);
		color: #b579d6;
		text-align: center;
	}
}
.bd_weixin_popup_foot{
	width: 250px;
	margin-top: p2r(-18);
	padding-bottom: p2r(10);
}

@keyframes steps{
	to{
		width: 100%;
	}
}
@keyframes bearRide{
	from{}
	to{
		transform: translateX((-260/32)*1rem);
	}
}
.loading{
	z-index: 10;
	.progress{
		background-color: transparent;
	}
	.step{
		width: 20%;
		height: 100%;
		background-color: #fc2e4d;
		position: absolute;
		right: 0;
		top: 0;
	}
}
.loading.animate{
	.step{
		animation: steps 1.5s linear forwards;
	}
	.rider{
		animation: bearRide 1.5s linear forwards;
	}
}

@keyframes grass1{
	from{}
	to{
		height: (396/32)*1rem;
	}
}
@keyframes grass2{
	from{
		transform: scale(2,1);
	}
	to{
		opacity: 1;
	}
}
@keyframes trees{
	from{
		transform: translateY(-200%);
	}
	90%{
		transform: translateY(-100%);
		opacity: 1;
	}
	100%{
		transform: none;
		opacity: 1;
	}
}
@keyframes btnAppear{
	from{}
	to{
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes rotate{
	from{}
	to{
		transform: rotate(360deg);
	}
}
@keyframes bearDown{
	from{
		transform: translateY(-50%);
	}
	to{
		transform: none;
		opacity: 1;
	}
}
@keyframes upandDown{
	from{
		transform: translateY(-5%);
	}
	to{
		transform: translateY(0);
	}
}
@keyframes small2big{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes small2big{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes bearDisappear{
	from{
		opacity: 1;
	}
	to{
		transform: translateY(100%);
		transform: scale(1.5,1.5);
		opacity: 0;
	}
}
.welcome{
	z-index: 5;
	.grass1{
		height: (20/32)*1rem;
	}
	.grass2{
		opacity: 0;
	}
	.trees{
		opacity: 0;
	}
	.rotate-btn-box{
		opacity: 0;
		transform: scale(0);
	}
	.bear-box{
		opacity: 0;
	}
	.smoke{
		opacity: 0;
	}
	.info{
		opacity: 0;
	}
	.hello{
		opacity: 0;
	}
}
.welcome.animate{
	.grass1{
		animation: grass1 .5s forwards;
	}
	.grass2{
		animation: grass2 .5s .5s forwards;
	}
	.trees{
		animation: trees .5s 1s forwards;
	}
	.rotate-btn-box{
		animation: btnAppear .5s 1.5s forwards;
	}
	.circle2{
		animation: rotate 1s linear infinite;
	}
	.bear-box{
		animation: bearDown .5s 2s forwards;
	}
	.bear{
		animation: upandDown .5s 2.5s infinite;
	}
	.smoke{
		animation: small2big .5s 3s infinite;
	}
	.info{
		animation: bearDown .5s 3.5s forwards;
	}
	.hello{
		animation: small2big .5s 4s forwards;
	}
}

@keyframes right2left{
	from{
		transform: translateX(100%);
	}
	to{
		transform: none;
		opacity: 1;
	}
}
@keyframes heightBigger{
	from{}
	to{
		height: 100%;
	}
}
.title{
	h3{
		opacity: 0;
	}
	p{
		opacity: 0;
	}
	.line{
		height: 0 !important;
	}
}
.swiper-slide.animate{
	.title{
		h3{
			animation: right2left .5s forwards;
		}
		p{
			animation: right2left .5s .2s forwards;
		}
		.line{
			animation: heightBigger .5s .5s forwards;
		}
	}
}

@keyframes rotateInOut{
	0%{
		transform: rotateZ(90deg);
	}
	25%{
		transform: rotateZ(-5deg);
		opacity: 1;
	}
	30%{
		transform: rotateZ(0);
		opacity: 1;
	}
	65%{
		transform: rotateZ(0);
		opacity: 1;
	}
	70%{
		transform: rotateZ(5deg);
		opacity: 1;
	}
	100%{
		transform: rotateZ(-90deg);
		opacity: 0;
	}
}
@keyframes rotateInNotOut{
	0%{
		transform: rotateZ(90deg);
	}
	95%{
		transform: rotateZ(-5deg);
		opacity: 1;
	}
	100%{
		transform: rotateZ(0);
		opacity: 1;
	}
}
@keyframes runUpDownLeftRight{
	25%{
		transform: translateX(10%) translateY(0);
	}
	50%{
		transform: translateX(-10%) translateY(10%);
	}
	75%{
		transform: translateX(0) translateY(-10%);
	}
	100%{
		transform: translateX(0) translateY(0);
	}
}
@keyframes left2Right2left{
	30%{
		transform: translateX(-100%);
	}
	60%{
		transform: translateX(100%);
	}
	100%{
		transform: none;
	}
}
@keyframes rotateBack{
	from{}
	to{
		transform: none;
	}
}
.page1{
	.scroll-page1{
		.bg{
			opacity: 0;
			transform-origin: 50% 200%;
		}
		.person{
			opacity: 0;
			transform-origin: 50% 200%;
		}
		.message-container{
			opacity: 0;
			transform-origin: right bottom;
		}
	}
	.scroll-page2{
		.bg{
			opacity: 0;
			transform-origin: 50% 200%;
		}
		.person{
			opacity: 0;
			transform-origin: 50% 200%;
			.leg2{
				transform-origin: left bottom;
				transform: rotateZ(30deg);
			}
		}
		.message-container{
			opacity: 0;
			transform-origin: right bottom;
		}
	}
	.scroll-page3{
		.bg{
			opacity: 0;
			transform-origin: 50% 200%;
		}
		.person{
			opacity: 0;
			transform-origin: 50% 200%;
		}
		.message-container{
			opacity: 0;
			transform-origin: right bottom;
		}
	}
}
.page1.animate{
	.scroll-page1{
		.bg{
			animation: rotateInOut 1.5s forwards;
		}
		.person{
			animation: rotateInOut 1.5s .2s forwards;
			.paper1{
				animation: left2Right2left 1s infinite;
			}
			.paper2{
				animation: left2Right2left .5s infinite;
			}
		}
		.message-container{
			animation: rotateInOut 1.5s .5s forwards;
		}
	}
	.scroll-page2{
		.bg{
			animation: rotateInOut 1.5s 1.7s forwards;
		}
		.person{
			animation: rotateInOut 1.5s 1.9s forwards;
			.leg2{
				animation: rotateBack .5s 2.2s infinite;
			}
		}
		.message-container{
			animation: rotateInOut 1.5s 2.2s forwards;
		}
	}
	.scroll-page3{
		.bg{
			animation: rotateInNotOut .5s 3.4s forwards;
		}
		.person{
			animation: rotateInNotOut .5s 3.6s forwards;
		}
		.message-container{
			animation: rotateInNotOut 1.5s 3.9s forwards;
		}
		.word1{
			animation: runUpDownLeftRight 1s infinite;
		}
		.word2{
			animation: runUpDownLeftRight .5s infinite;
		}
		.word3{
			animation: runUpDownLeftRight 1.5s infinite;
		}
		.word4{
			animation: runUpDownLeftRight 2s infinite;
		}
	}
}

@keyframes bottom2Top{
	from{
		transform: translateY(100%);
	}
	to{
		transform: none;
		opacity: 1;
	}
}
@keyframes samll2big2samll{
	from{
		transform: scale(0);
	}
	95%{
		transform: scale(1.2);
		opacity: 1;
	}
	100%{
		transform: none;
		opacity: 1;
	}
}
@keyframes leftShake{
	30%{
		transform: rotateZ(20deg);
	}
	60%{
		transform: rotateZ(-20deg);
	}
	100%{
		transform: none;
	}
}
.page2{
	.bear{
		opacity: 0;
		.face1{
			opacity: 0;
		}
		.face2{
			opacity: 0;
		}
		.hand-left{
			transform-origin: left top;
		}
		.hand-right{
			transform-origin: right top;
		}
	}
	.table{
		opacity: 0;
	}
	.food{
		opacity: 0;
	}
	.bg{
		opacity: 0;
		transform-origin: 50% 200%;
	}
}
.page2.animate{
	.bg{
		animation: rotateInNotOut .5s forwards;
	}
	.table{
		animation: bearDown .5s .5s forwards;
	}
	.bear{
		animation: bottom2Top .5s 1s forwards;
		.face1{
			animation: samll2big2samll .5s 2s forwards;
		}
		.face2{
			animation: samll2big2samll .5s 2s forwards;
		}
		.hand-left{
			animation: leftShake .5s infinite;
		}
		.hand-right{
			animation: leftShake .8s infinite;
		}
	}
	.food{
		animation: bearDown .5s 1.5s forwards;
	}
}

.page3{
	.bg{
		opacity: 0;
		transform-origin: 50% 200%;
	}
	.bear{
		opacity: 0;
	}
	.license{
		opacity: 0;
	}
	.oil{
		opacity: 0;
	}
	.evil{
		opacity: 0;
	}
}
.page3.animate{
	.bg{
		animation: rotateInNotOut .5s forwards;
	}
	.bear{
		animation: bearDown .5s .5s forwards;
	}
	.license{
		animation: samll2big2samll .5s 1s forwards,runUpDownLeftRight .5s 1.5s infinite;
	}
	.oil{
		animation: samll2big2samll .5s 1s forwards,runUpDownLeftRight .3s 1.5s infinite;
	}
	.evil{
		animation: samll2big2samll .5s 1s forwards,runUpDownLeftRight .7s 1.5s infinite;
	}
}

.page3{
	.animation-bear-box{
		.animate-bear1{
			background-image: url('../images/bear3-1.png');
			/*background-size: (206/32)*1rem (321/32)*1rem;*/
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-206/32/2)*1rem;
			bottom: (195/32)*1rem;
			width: (206/32)*1rem;
			height: (321/32)*1rem;
			z-index: 1;
			opacity: 0;
		}
		.animate-bear2{
			background-image: url('../images/bear3-2.png');
			/*background-size: (206/32)*1rem (321/32)*1rem;*/
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-206/32/2)*1rem;
			bottom: (195/32)*1rem;
			width: (206/32)*1rem;
			height: (321/32)*1rem;
			z-index: 1;
			opacity: 0;
		}
		.animate-bear3{
			background-image: url('../images/bear3-3.png');
			/*background-size: (206/32)*1rem (321/32)*1rem;*/
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: absolute;
			left: 50%;
			/*transform: translateX(-50%);*/
			margin-left: (-206/32/2)*1rem;
			bottom: (195/32)*1rem;
			width: (206/32)*1rem;
			height: (321/32)*1rem;
			z-index: 1;
			opacity: 0;
		}
	}
	.hit-card-box{
		.card1{
			@include bg('../images/license1.png');
			@include size(228, 151);
			left: (40/32)*1rem;
			bottom: (500/32)*1rem;
			opacity: 0;
		}
		.card2{
			@include bgc ('../images/oil1.png', 231);
			@include size(231, 156);
			bottom: (660/32)*1rem;
			opacity: 0;
		}
		.card3{
			@include bg('../images/evil1.png');
			@include size(211, 173);
			right: (30/32)*1rem;
			bottom: (480/32)*1rem;
			opacity: 0;
		}
	}
}

.page4{
	.bg{
		opacity: 0;
		transform-origin: 50% 200%;
	}
	.bear{
		opacity: 0;
	}
	.card1{
		opacity: 0;
	}
	.card2{
		opacity: 0;
	}
	.card3{
		opacity: 0;
	}
}
.page4.animate{
	.bg{
		animation: rotateInNotOut .5s forwards;
	}
	.bear{
		animation: bearDown .5s .5s forwards;
	}
	.card1{
		animation: samll2big2samll .5s 1s forwards;
	}
	.card2{
		animation: samll2big2samll .5s 1s forwards;
	}
	.card3{
		animation: samll2big2samll .5s 1s forwards;
	}
}

/* 雪花动画 */
@keyframes snowLeft{
	from{}
	50%{
		opacity: 1;
	}
	100%{
		transform: translateY(1000%) translateX(200%);
		opacity: 1;
	}
}
@keyframes snowRight{
	from{}
	50%{
		opacity: 1;
	}
	100%{
		transform: translateY(1000%) translateX(200%);
		opacity: 1;
	}
}

.page5{
	.bg{
		opacity: 0;
		transform-origin: 50% 200%;
	}
	.bear{
		opacity: 0;
	}
	.smoke{
		opacity: 0;
	}
	.cloud{
		opacity: 0;
		.snow{
			@include bg('../images/snow.png');
			@include size(32, 32);
			bottom: 0;
			opacity: 0;
		}
		.snow:nth-child(2){
			left: p2r(32);
		}
		.snow:nth-child(3){
			left: p2r(32*2);
		}
		.snow:nth-child(4){
			left: p2r(32*3);
		}
		.snow:nth-child(5){
			left: p2r(32*4);
		}
		.snow:nth-child(6){
			left: p2r(32*5);
		}
	}
}
.page5.animate{
	.bg{
		animation: rotateInNotOut .5s forwards;
	}
	.bear{
		animation:  bearDown .5s .5s forwards,upandDown .5s 1s infinite;
	}
	.smoke{
		animation: small2big .5s 1s infinite;
	}
	.cloud{
		animation: samll2big2samll .5s 1s forwards,runUpDownLeftRight 1s 1.5s infinite;
		.snow:nth-child(1){
			animation: snowLeft .5s 1.5s infinite;
		}
		.snow:nth-child(2){
			animation: snowLeft .3s 1.5s infinite;
		}
		.snow:nth-child(3){
			animation: snowLeft 1s 1.5s infinite;
		}
		.snow:nth-child(4){
			animation: snowRight 2s 1.5s infinite;
		}
		.snow:nth-child(5){
			animation: snowLeft .1s 1.5s infinite;
		}
		.snow:nth-child(6){
			animation: snowRight .8s 1.5s infinite;
		}
	}
}

/* transform默认是 none 还原为 自己初始的样式 */
@keyframes none2Normal{
	from{
		transform: none;
	}
	to{
		opacity: 1;
	}
}
@keyframes big2small{
	from{}
	to{
		transform: scale(0,0);
		opacity: 0;
	}
}

.page6{
	.bg{
		opacity: 0;
		transform-origin: 50% 200%;
	}
	gift-box>div{
		opacity: 0;
	}
}
.page6.animate{
	.bg{
		animation: rotateInNotOut .5s forwards;
	}
	/*.gift-box>div{
		animation: none2Normal 1s infinite;
	}
	.gift-box>div>div{
		animation: rotate 1s .5s infinite;
	}*/
	@for $i from 1 through 12 {
		.gift-box>div:nth-child(#{$i}){
			animation: none2Normal 2s $i*0.1s infinite;
		}
	}
	@for $i from 1 through 12 {
		.gift-box>div:nth-child(#{$i})>div{
			animation: rotate 2s ($i*0.1s) infinite;
		}
	}
}

/* scss for循环的写法 从 1 到 12 的样式 */
@for $i from 1 through 12 {
	.item-#{$i} { 
		width: 2rem * $i; 
	}
	.gift-box>div:nth-child(#{$i}){
		// animation: rotate 1s $i*0.1s infinite;
	}
}

.page7{
	.bear{
		opacity: 0;
	}
	.motobike{
		opacity: 0;
	}
}
.page7.animate{
	.bear{
		animation: bearDown .5s .5s forwards;
	}
	.motobike{
		animation: samll2big2samll .5s 1s forwards;
	}
}